<!DOCTYPE html>
<head xmlns:v-bind="http://www.w3.org/1999/xhtml" >
    <meta charset="UTF-8">
    <title>demo9监听属性-千米和米之间的转换</title>
  <script src="./js/vue.min.js"></script>

</head>

<body>
   <div id="app">
    千米:<input type="text" v-model="killometers">
     米:<input type="text" v-model="meters">
   </div>
   <p id="info"></p>
   <script type="application/javascript">
     var vm = new Vue({
       el: "#app",
       data: {
         killometers: 0,
         meters: 0
       },
       methods:{

       },
       computed:{

       },
       watch: {
         killometers: function (val) {
           this.killometer = val;
           this.meters = this.killometer * 1000;
         },
         meters: function (val) {
           this.killometers = val/1000;
           this.meters = val;
         }
       }
     });
     vm.$watch('killometers',function (newV, oldV) {
       document.getElementById("info").innerHTML = "千米修改前值为:"+oldV+",修改后值为:"+newV;
     })


   </script>
</body>

</html>
